<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            事件的基本使用：
                1、使用v-on:xxx或者@xxx绑定事件
                2、事件的回调在methods上，最后会在vm上
                3、methods里面的函数不能使用箭头函数，否则会改变this指向
                4、methods的函数，都被vue管理，this指向vm或组件实例对象
                5、@click:"demo"和@click:"demo($event)"效果相同，但后者可以传参数
         -->
        <div id="root">
            <button v-on:click="showInfo1">点我不传参</button>
            <button @click="showInfo2($event,666)">点我传参</button>
        </div>
    </body>
        <script>
            Vue.config.productionTip = false;
           const vm = new Vue({
                el:"#root",
                data:{
                    name:"鬼谷"
                },
                methods:{
                    showInfo1(event){
                        console.log(event);
                    },
                    showInfo2(event,num){
                        console.log(event);
                        alert(num);
                    }
                }
            });
        </script>
</html>